<template>
  <div class="home">
  <!--头部logo、搜索框、客服  -->
	<Header></Header>
  <!-- 菜单栏组件 -->
	<ly-tab
	    v-model="selectedId"
	    :items="items"
	    :options="options"
		@change="changeTab"
		>
	</ly-tab>
  <!-- 主体内容 -->
  <section>
	<!-- 渲染newData的值 -->
	<div
		v-for="(item ,index) in newData"
		:key="index"
	>
		<Swiper v-if="item.type=='swiperList'" :swiperList="item.data" ></Swiper>
		<Icons v-if="item.type=='iconsList'" :iconsList="item.data"></Icons>
		<Recommend v-if="item.type =='recommendList'" :recommendList="item.data"></Recommend>
		

		<Ad v-if="item.type =='adList'" :adList="item.data"></Ad>
		<Like v-if="item.type =='likeList'" :likeList="item.data"></Like>

	</div>
	
  </section>
	<Tabbar></Tabbar> 
  </div>
</template>

<script>
//引入组件
import Header from '@/components/home/Header.vue'
import Icons from '@/components/home/Icons.vue'
import Recommend from '@/components/home/Recommend.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import Swiper from '@/components/home/Swiper.vue'
import Like from '@/components/home/Like.vue'
import Ad from '@/components/home/Ad.vue'


//引入axios的二次封装
import http from '@/common/api/request.js'


export default {
  name: "Home",
  data () {
	return {
		selectedId: 0,
		//items是用来接收接口数据的数组
		items: [],
		options: {
		  activeColor: '#b0352f'
		},
		newData:[],
	 }
  },
  components:{
	Tabbar,
	Header,
	Icons,
	Recommend,
  	Swiper,
	Like,
	Ad,
  },
  methods:{
	//首页获取数据方法
	async getData(){
		
		let res= await http.$axios({
			url:'/api/index_list/0/data/1'
		})
		//头部切换栏目的数据
		this.items = Object.freeze(res.topBar)
		//home中所有组件的数据
		this.newData=Object.freeze(res.Homedata)

		//下方是直接使用axios来获取接口数据 未进行封装 非常麻烦
		// let res = await axios({
		// 	url:'/api/index_list/0/data/1'
		// })
		// this.items = res.data.data.topBar 定义头部切换栏的数组
		// this.items = Object.freeze(res.data.data.topBar)
		//定义home中所有组件的数据
		// this.newData=Object.freeze(res.data.data.Homedata)
		
		// console.log(this.newData);
	},
	//点击获取数据方法（用于头部栏切换）
	async addData(index){
		//没有二次封装axios的方法
		// let res = await axios({
		// 	url:'/api/index_list/'+index+'/data/1'
		// });
		// //判断切换的栏目是否为推荐栏目 如果是推荐栏目 则与其他栏目获取数据的层级不同
		// if( !(res.data.data instanceof Array)){
		// 	this.newData=res.data.data.Homedata
		// }else{
		// 	this.newData=res.data.data
		// }
		// console.log(this.newData);

		//二次封装后
		let res = await http.$axios({
			url:'/api/index_list/'+index+'/data/1'
		})
		//判断切换的栏目是否为推荐栏目 如果是推荐栏目 则与其他栏目获取数据的层级不同
		if(!(res instanceof Array)){
			this.newData = res.Homedata
		}else{
			this.newData =res
		}
		console.log(res)
		
	},
	//点击转换栏目的方法（获取栏目的index值）
	changeTab(item,index){
		this.addData(index)
	},
  },
  created(){
	this.getData();
  }
};
</script>

<style scoped lang="less">
@rootsize:37.5rem;
.ly-tab{
	position: fixed;
	top:(52 / @rootsize);
	left:0;
	z-index: 99;
	
}
::v-deep .ly-tabbar{
	width: 100vw;
	box-shadow:none;
	border-bottom:none;
	opacity: 1;
	background-color: #fff;
	
}
section{
	margin-top: (100 / @rootsize);
	margin-bottom: (60 / @rootsize);
}
</style>